<template>
  <div class="app-container">
    <div class="filter-container">
      <el-select v-model="systemId" placeholder="全部系统" clearable style="width: 140px" class="filter-item" @change="changeSystem">
        <el-option v-for="item in systems" :key="item.id" :label="item.node_name" :value="item.id" />
      </el-select>
      <el-select v-model="nodeId" placeholder="全部页面" clearable class="filter-item" style="width: 180px" @change="changePage">
        <el-option v-for="item in pages" :key="item.id" :label="item.node_name" :value="item.id" />
      </el-select>
      <el-input v-model="listQuery.elementName" placeholder="请输入元素名称" style="width: 200px;" class="filter-item" @keyup.native="handleFilter" />
    </div>
    <el-table
      border
      highlight-current-row
      :data="pageData"
      style="width: 100%"
    >
      <el-table-column
        prop="element_name"
        sortable
        align="center"
        :show-overflow-tooltip="true"
        label="元素名称"
        min-width="160"
      />
      <el-table-column
        prop="location_by_id"
        sortable
        align="center"
        :show-overflow-tooltip="true"
        min-width="120"
        label="定位类型"
      >
        <template slot-scope="scope">
          <span>{{ locationBy[scope.row.location_by_id].cn_name }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="by_value"
        sortable
        align="center"
        min-width="120"
        :show-overflow-tooltip="true"
        label="定位值"
      />
      <el-table-column
        prop="frame_name"
        align="center"
        sortable
        :show-overflow-tooltip="true"
        min-width="100"
        label="frame"
      />
      <el-table-column
        prop="mark"
        :show-overflow-tooltip="true"
        sortable
        align="center"
        min-width="80"
        label="备注"
      />
      <el-table-column label="操作" fixed="right" header-align="center" align="center" min-width="60">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="chooseElement(scope.row)">选择</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        :current-page="pageIndex"
        :page-sizes="[10, 15, 30, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getElementPageList, elementList } from '@/api/element.js'
import mixinBaseView from '@/mixins/view-base.js'

export default {
  mixins: [mixinBaseView],
  props: ['type'],
  data() {
    return {
      systemId: '',
      nodeId: '',
      listQuery: { // 查询条件
        elementName: ''
      },
      systems: [],
      pages: []
    }
  },
  computed: {
    locationBy() {
      return this.$store.state.user.dictConfig.locationBy
    },
    elementType() {
      return this.$store.state.user.dictConfig.elementType
    }
  },
  created() {
    // 获取所有系统
    getElementPageList({
      node_level: 1
    }).then(response => {
      this.systems = response.data
    })
    this.getPages()
    this.getData()
  },
  methods: {
    // 改变系统重新加载元素列表
    changeSystem() {
      this.nodeId = ''
      this.getPages()
      this.getData()
    },
    // 改变页面重新加载元素列表
    changePage() {
      this.getData()
    },
    // 选择元素
    chooseElement(row) {
      this.$emit('getWebElement', row)
    },
    // 过滤
    selfHandleFilter(data) {
      if (this.listQuery.elementName !== '') {
        data = data.filter(item => item.element_name.indexOf(this.listQuery.elementName) !== -1)
      }
    },
    // 获取数据
    getData() {
      const params = {
        type: this.type
      }
      if (this.nodeId !== '') {
        params.node_id = this.nodeId
      } else if (this.systemId !== '') {
        params.system_id = this.systemId
      }
      elementList(params).then(response => {
        this.tableData = response.data
        this.handleFilter()
      })
    },
    getPages() {
      const params = {}
      if (this.systemId !== '') {
        params.parent_node_id = this.systemId
      } else {
        params.node_level = 2
      }
      getElementPageList(params).then(response => {
        this.pages = response.data
      })
    }
  }
}
</script>

<style scoped>
</style>
